<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="/css/index.css" type="text/css">
    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/qs.min.js"></script>
    <script src="/js/index.js"></script>
    <style>
        .register{
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-card class="box-card" style="width: 450px; margin: 180px auto; border-radius: 15px">
            <el-form :label-position="labelPosition" label-width="80px" :model="user">
                <el-form-item style="margin-left: 100px;">
                    <h2>系统登录</h2>
                </el-form-item>
                <el-form-item label="用户名">
                    <el-input type="text" v-model="user.username"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-checkbox label="免登陆" v-model="user.rememberMe" style="margin: 0 auto;"></el-checkbox>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="login" style="width: 300px;">登录</el-button>
                </el-form-item>
                <a href="/page/register.html" class="register">注册</a>
            </el-form>
        </el-card>
    </div>

</body>
<script>
    new Vue({
        el: "#app",
        data(){
            return{
                labelPosition: "right",
                user: {username:"",password:"",rememberMe:false},
                error: "",
            };
        },
        methods:{
            login(){
                axios.post("/doLogin",
                    Qs.stringify(this.user)) //将json字符串转换为表单格式
                .then(res => {
                    if(res.data.msg == "用户被禁用"){
                        this.$message.error("用户被禁用，请向管理员申请权限")
                    }else if(res.data.msg == "账号或密码错误"){
                        this.$message.error("账号或密码错误")
                    }else{
                        location.href = "main.html";
                    }
                })
            },
        }
    });
</script>
</html>